import React ,{useEffect,useState}from 'react'
import "./Home.less"
import {useSelector} from 'react-redux'
import Button from '@mui/material/Button';
import { css } from '@emotion/react'
import DeleteIcon from '@mui/icons-material/Delete';
import Img from "@/static/images/home/xiaolang.png"
// 跳转
import { useNavigate } from 'react-router-dom';
// 请求首页数据
import {GetHomeApi} from "@/request/api"
// 引入组件
import Homeitem from "@/components/Homeitem/Homeitem"
import One from "@/static/images/home/a1.png"
import Two from "@/static/images/home/a2.png"
import Three from "@/static/images/home/a3.png"
export default function Home() {
  // 使用redux中的标题
  let homeTitle = useSelector((state:Istore)=>state.homeTitle)
  // 引入路由
  let navigate = useNavigate()
  // 定义页面所需的数据
  const [title,settitle] = useState("")
  // 操作title的方法
  const [study,setstudy] = useState(0)
  // 操作wrong的方法
  const [wrong,setwrong] = useState(0)
  const [collect,setcollect] = useState(0)
  const [total,settotal] = useState(0)
  // useState<可以传递泛型>用于指定 创建的 参数的数据类型
  const [exemItems,setExemItems] = useState<IExam[]>([])
  let [title2,setTitle2] = useState("Java学科面试题")
  const GetHome = async()=>{
    let homedata = sessionStorage.getItem("homedata")
    if(homedata){
      let data = JSON.parse(homedata)
      settitle(data.exam.title)
      setstudy(data.study)
      setwrong(data.wrong)
      setcollect(data.collect)
      settotal(data.exam.itemCount)
      setExemItems(data.exemItems )
      console.log(homedata);
      
    }else{
    let res = await GetHomeApi();
    console.log(res);
    console.log(res.data.exam);
    if(res.errCode === 0){
      settitle(res.data.exam.title)
      setstudy(res.data.study)
      setwrong(res.data.wrong)
      setcollect(res.data.collect)
      settotal(res.data.exam.itemCount)
      setExemItems(res.data.exemItems )
      sessionStorage.setItem("homedata",JSON.stringify(res.data))
    }
  }
  }
  useEffect(()=>{
    // 请求接口
    GetHome()
  },[])
  let store = useSelector(state=>state) as Istore
  return (
    <div className='home'>
      <div className='title'>
        <div className='title_size'>{homeTitle}</div>
        <div className='change' onClick={()=>{
          navigate("/toggle")
        }}>切换考试科目</div>
      </div>
      {/* 蓝色的banner */}
      <div className='banner'>
        <div className='top'>
          欢迎使用IT猿题库
        </div>
        <div className='bottom'>
          <div className='left'>
            <img src={Img}alt="" />
          </div>
          <div className='right'>
          <div className='right'>
            <div className='right_top'>
              <div>已学{collect}题</div>
              <div>|</div>
              <div>共{total}题</div>
            </div>
            <div className='right_bottom'>
              <div>
                <div className='right_num'>{study}</div>
                <div>错题</div>
              </div>
              <div>
                <div className='right_num'>{wrong}</div>
                <div>收藏</div>
              </div>
            </div>
            </div>
          </div>
        </div>
      </div>
      <div className='san'>
        <div className='one'><img src={One} alt="" /></div>
        <div className='one'><img src={Two} alt="" /></div>
        <div className='one'><img src={Three} alt="" /></div>
      </div>
      <div className='biaoti'>
        <div className='one'>学科题库</div>
        <div className='two'>坚持每一天,成长看得见</div>
      </div>
      <div>
        {
          exemItems.map((item,index)=>{
            return <Homeitem key={item.id} data={item}></Homeitem>
        })
        }
      </div>
      
      {/* {store.num} */}
      {/* <Button variant="contained">你好，世界</Button> */}
      {/* <DeleteIcon></DeleteIcon> */}
  </div>
    
  )
}
